<template>
	<view :class="show?'slide':''">
		<view class="content">
			<div class="nav">
				<div class="r">

					<image @click="news" style="float: right;" src="../../static/index/消息@2x.png">
						<!--            <uni-badge class="uni-badge-left-margin" text="8" size="small"></uni-badge>-->
					</image>

					<!--					<uni-icons type="chat" size="25" color="#fff" @click="news"></uni-icons>-->
				</div>
			</div>
			<div class="top">
				<image class="bc" src="../../static/index/首页背景@2x.png" mode="widthFix"></image>
				<div class="user">
					<div class="avatar">
						<image :src="userInform.avatar" @click="user" mode="scaleToFill"></image>
					</div>
					<div class="name">
						<p>{{ userInform.name }}</p>
						<div style="opacity: 70%; ">
							<p @click="dem" v-if="userInform.level">
								<image :src="userInform.level.icon" mode="widthFix"></image>
								<span v-if="userInform.level">{{ userInform.level.nickName }}</span>
							</p>
						</div>
					</div>
					<div class="add" style="opacity: 50%;"><a style="position: relative; bottom: 2px"
							@click="collectMoney">添加收款码</a>
						<uni-icons type="forward" size="18" color="#fff"></uni-icons>
					</div>
				</div>
			</div>
			<div class="box">
				<div class="money">
					<div class="t">
						<div class="num">
							<p style="opacity: 50%;">待提现（元）</p>
							<p>{{ userInform.amount | formatDecimal }}</p>
						</div>
						<div class="details" @click="help">
							<image src="../../static/index/赚钱攻略@2x.png" mode="widthFix"></image>
						</div>
					</div>
					<div class="b">
						<div class="li">
							<p>今日收益（元）</p>
							<p style="font-weight: bold">{{ today | formatDecimal }}</p>
						</div>
						<div class="li">
							<p>累计收益</p>
							<p style="font-weight: bold">{{ userInform.amountCont | formatDecimal }}</p>
						</div>
						<div class="deposit" @click="deposit">提现</div>
					</div>
					<div class="news">
						{{ xiaoxi }}
					</div>
				</div>
				<div style="display: flex;justify-content: center;">
					<image style="margin-top: 10rpx; width: 100%;" src="../../static/index/编组5@2x.png" mode="widthFix" @click="onShare">
					</image>
				</div>
				<div class="me" @click="more">
					<p>
						<image src="../../static/index/公告@2x.png" mode="widthFix"></image>
						<span>公告</span>
						<span>新手指南</span>
					</p>
					<span>更多</span>
				</div>
				<div class="ul">
					<div class="li" @click="team">
						<image src="../../static/index/我的团队@2x.png" mode="widthFix"></image>
						<p>我的团队</p>
					</div>
					<div class="li" @click="commission">
						<image src="../../static/index/我的佣金@2x.png" mode="widthFix"></image>
						<p>我的佣金</p>
					</div>
					<div class="li" @click="help">
						<image src="../../static/index/帮助中心@2x.png" mode="widthFix"></image>
						<p>帮助中心</p>
					</div>
					<div class="li" @click="cooperate">
						<image src="../../static/index/商务合作@2x.png" mode="widthFix"></image>
						<p>商务合作</p>
					</div>
				</div>
				<div class="click" @click="leaderboard">
					<image src="../../static/index/排行榜@2x.png" mode="widthFix"></image>
				</div>
			</div>
			<div class="btn" @click="share">我要分享赚钱</div>
			<view>
				<uni-popup ref="popup" type="center" background-color="rgba(0,0,0,0)">
					<div class="pop">
						<div class="text1">
							<img src="../../static/商务微信@3x.png">
							<div class="h1">
								复制商务客服微信号
							</div>
							<div class="h2">
								添加微信客服{{ userInform.manager==null||userInform.manager==undefined?manager:userInform.manager.phoneNumber }}
								沟通商务
							</div>
						</div>
						<div class="btns" @click="gc" :data-clipboard-text="manager">复制微信号</div>
					</div>
				</uni-popup>
			</view>
			<view>
				<uni-popup ref="money" type="center" background-color="rgba(0,0,0,0)">
					<div class="moneyPop">
						<div class="text1">
							<div class="h1">
								您还未缴纳保证金是否要去缴纳?
							</div>
						</div>
						<div class="btnse" @click="moList">确定</div>
					</div>
				</uni-popup>
			</view>

			<view>
				<uni-popup ref="news" type="center" background-color="rgba(0,0,0,0)">
					<div class="moneyPop">
						<div class="text1">
							<div class="h1">
								个人信息还不完善请先完善个人信息!
							</div>
						</div>
						<div class="btnse" @click="newO">去完善</div>
					</div>
				</uni-popup>
			</view>


			<!--      <view>-->
			<!--        <uni-popup ref="share" type="center" background-color="rgba(0,0,0,0)">-->
			<!--          <div class="share">-->
			<!--            <div class="text1">-->
			<!--              <div class="h1">-->
			<!--                选着分享的类型-->
			<!--              </div>-->
			<!--            </div>-->
			<!--            <div class="ini">-->
			<!--            <div class="btnse" @click="shareAgent">去分享代理</div>-->
			<!--            <div class="btnse" @click="shareUser">去分享用户</div>-->
			<!--            </div>-->
			<!--          </div>-->
			<!--        </uni-popup>-->
			<!--      </view>-->


		</view>
	</view>
</template>
<script>
	import ClipboardJS from "../../utils/clipboard.min"
	import Api from "../../API/api";

	export default {
		data() {
			return {
				mi: "64",
				userInform: {
					state: {
						value: null
					},
					level: {
						value: null,
						icon: null,
						introduceImg: null,
					},
					avatar: "",
					managerId: {},
					amount: 0,
					amountCont: 0,

					day: 0
				},
				today: 0,
				manager: "",
				config: {},
				xiaoxi: "",
				show: false
			}
		},
		filters: {
			formatDecimal(value) {
				// 将值转换为 Number 类型，然后使用 toFixed 方法将其格式化为带有两位小数的字符串
				return Number(value).toFixed(2);
			},
		},
		onShow() {
			Api.getwxuser().then(res => {
				console.log(res.data);
				this.userInform = res.data; // this.manager = res.data.managerPo.phoneNumber;
				uni.setStorageSync('userInform', res.data);
				console.log("userInform" + uni.getStorageSync('userInform'))
			})
			Api.getDay().then(res => {
				this.today = res.data
			})
			Api.getConfig().then(res => {
				console.log(res)
				this.manager = res.data.mobile
				this.config = res.data;
				uni.setStorageSync('config', res.data)
			})
		},
		onLoad() {
			this.bonus();
			setInterval(this.bonus, 10000);
		},
		//复制微信号
		mounted() {
			const clipboard = new ClipboardJS(".btns");
			clipboard.on('success', (e) => {
				console.log('已成功复制到剪贴板');
				uni.showToast({
					title: '复制成功',
					icon: 'checkmarkempty'
				})
				e.clearSelection();
			});
			clipboard.on('error', (e) => {
				console.error('复制到剪贴板失败:', e.error);
			});
		},
		methods: {
			
			//跳转到招募令
			onShare(){
				uni.navigateTo({
					url:'/pages/share/index'
				})
				
			},

			dem() {
				uni.navigateTo({
					url: '/pages/index/dem'
				})
			},
			bonus() {
				const randomNumber1 = Math.floor(Math.random() * 7) + 3; // 生成 3-9 之间的随机数
				let wa = [3, 7, 8]
				const randomNumber2 = Math.floor(Math.random() * 3 + 1);
				const randomNumbe3 = Math.floor(Math.random() * 900) + 100;
				const randomNumbe4 = Math.floor(Math.random() * 60) + 1;
				const randomNumbe5 = Math.floor(Math.random() * 1800) + 10;
				const randomNumbe6 = Math.floor(Math.random() * 100) + 1;
				//132 *****787 获得佣金39.33元 23秒前
				let a = "1" + wa[randomNumber2 - 1] + randomNumber1 + "  *****" + randomNumbe3 + " 获得了佣金" + randomNumbe5 +
					"." + randomNumbe6 + "元 \u00A0\u00A0\u00A0" + randomNumbe4 + "秒前"
				this.xiaoxi = a;
			},
			//复制弹窗
			gc() {
				this.$refs.popup.close()
			},
			my() {
				uni.navigateTo({
					url: '/pages/index/bail'
				})
			},
			//缴纳押金弹窗
			moList() {
				this.$refs.money.close()
				uni.navigateTo({
					url: '/pages/index/bail'
				})
			},
			cooperate() {
				this.$refs.popup.open()
			},

			//帮助中心
			help() {
				uni.navigateTo({
					url: '/pages/index/help'
				})
			},
			//我的团队
			team() {
				uni.navigateTo({
					url: '/pages/index/group'
				})
			},
			//我的佣金
			commission() {
				// if (this.userInform.phone == null) {
				//   this.$refs.news.open()
				//   return;
				// }
				// if (this.userInform.level === null) {
				//   this.$refs.money.open()
				//   return;
				// }
				uni.navigateTo({
					url: '/pages/index/my_money'
				})

			},
			newO() {
				uni.navigateTo({
					url: '/pages/index/edit'
				})
				this.$refs.news.close()
			},
			//收入明细
			details() {
				uni.navigateTo({
					url: '/pages/index/money'
				})
			},
			//更多公告
			more() {
				uni.navigateTo({
					url: '/pages/index/newsSystem'
				})
			},
			//设置中心
			user() {
				uni.navigateTo({
					url: '/pages/index/user'
				})
			},
			//添加收款码
			collectMoney() {
				uni.navigateTo({
					url: '/pages/index/upimg'
				})
			},
			//提现
			deposit() {
				uni.navigateTo({
					url: '/pages/index/withdraw'
				})
			},
			//分享
			share() {
				if (this.userInform.phone == null) {
					this.$refs.news.open()
					return;
				}
				this.show = true
				setTimeout(() => {
					this.show = false
					uni.navigateTo({
						url: '/pages/index/my_poster'
					})
				}, 200)
			},
			//排行榜
			leaderboard() {
				uni.navigateTo({
					url: '/pages/index/ranking',
				})
			},
			//消息
			news() {
				uni.navigateTo({
					url: '/pages/index/news'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	// 滑动动画
	.slide {
		transform: translateX(-750rpx);
		transition: 0.2s;
	}

	page {
		background-color: #f3f4f8;
	}

	.pop {
		background-color: #FFFFFF;
		width: 650rpx;
		height: 700rpx;
		//margin-bottom: 200rpx;
		border-radius: 50rpx;

		img {
			width: 100%;
		}

		.text1 {
			text-align: center;

			.h1 {
				font-size: 40rpx;
				font-weight: bold;
				color: #000000;
				//margin-top: 100rpx;
			}

			.h2 {
				margin-top: 10rpx;
				font-size: 30rpx;
				color: #000000;
				color: #ccc;
			}
		}

		.btns {
			width: 520rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #FFBE00FF 0%, #FFC200FF 100%);
			border-radius: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			position: relative;
			top: 30px;
			left: 50%;
			transform: translateX(-50%);
			color: #FFFFFF;
		}

	}

	.moneyPop {
		background-color: #FFFFFF;
		width: 600rpx;
		height: 300rpx;
		//margin-bottom: 200rpx;
		border-radius: 50rpx;

		.text1 {
			text-align: center;

			.h1 {
				padding-top: 30px;
				font-size: 30rpx;
				//margin-top: 20px;
				//font-weight: bold;
				color: #000000;
				//margin-top: 100rpx;
			}

			.h2 {
				margin-top: 10rpx;
				font-size: 30rpx;
				color: #000000;
				color: #ccc;
			}
		}

		.btnse {
			width: 520rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #FFBE00FF 0%, #FFC200FF 100%);
			border-radius: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			position: relative;
			top: 35px;
			left: 50%;
			transform: translateX(-50%);
			color: #FFFFFF;
		}

	}

	.share {
		background-color: #FFFFFF;
		width: 600rpx;
		height: 300rpx;
		//margin-bottom: 200rpx;
		border-radius: 50rpx;

		.text1 {
			text-align: center;

			.h1 {
				padding-top: 30px;
				font-size: 30rpx;
				//margin-top: 20px;
				//font-weight: bold;
				color: #000000;
				//margin-top: 100rpx;
			}

			.h2 {
				margin-top: 10rpx;
				font-size: 30rpx;
				color: #000000;
				color: #ccc;
			}
		}

		.btnse {
			width: 200rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #FFBE00FF 0%, #FFC200FF 100%);
			border-radius: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			top: 35px;
			left: 50%;
			transform: translateX(-50%);
			color: #FFFFFF;
		}

	}

	//@font-face {
	//  font-family: 'DINCond-Bold';
	//  src: url('../../static/DINCond-Bold.otf');
	//}
	//font-family: DINCond-Bold, sans-serif;
	.content {

		//font-family: DINCond-Bold, sans-serif;
		.nav {
			position: fixed;
			top: 20rpx;
			display: flex;
			width: 100vw;
			padding: 20rpx;
			box-sizing: border-box;
			justify-content: space-between;
			align-items: center;
			z-index: 100;
			color: #fff;

			image {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				right: 15px;
			}

			.l {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.top {
			.bc {
				width: 100%;

				image {
					width: 100%;
					position: fixed;
					top: 0;
				}
			}

			.user {
				z-index: 10;
				position: fixed;
				width: 100%;
				height: 10%;
				top: 5rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.avatar {
					width: 120rpx;
					border-radius: 50%;
					float: left;


				}

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					float: left;
				}

				.name {
					color: #FFFFFF;
					font-weight: 600;
					float: left;
					margin-left: 20rpx;
					margin-top: 15rpx;


					p {
						display: flex;
						align-items: center;

					}

					image {
						width: 60rpx;

					}

					span {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FDE7C5;
						// line-height: 34rpx;
					}
				}

				.add {
					float: right;
					color: #FFFFFF;
					font-size: 26rpx;
					line-height: 200rpx;
					height: 10%;
					//margin-top: 20rpx;
				}
			}
		}

		.box {
			transform: translateY(-110rpx);
			width: 90%;
			margin: auto;

			.money {
				border-radius: 20rpx;
				background-color: rgba(255, 255, 255, 0.8);
				box-sizing: border-box;
				padding: 30rpx 20rpx 0 20rpx;
				backdrop-filter: blur(8px);

				.t {
					display: flex;
					justify-content: space-between;

					p {
						&:nth-child(1) {
							color: #070E2F;
							font-size: 28rpx;
						}

						&:nth-child(2) {
							color: #000;
							font-weight: 700;
							font-size: 56rpx;
						}
					}

					.details {
						transform: translateX(20rpx);
						z-index: 9999;

						image {
							width: 200rpx;
						}
					}
				}

				.b {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
					color: #070E2F;


					.deposit {
						width: 142rpx;
						height: 60rpx;
						text-align: center;
						line-height: 64rpx;
						border-radius: 32rpx;
						border: 2rpx solid #FD9509;
						color: #FD9509;
					}

					.li {
						color: #ccc;
					}
				}

				.news {
					margin-top: 10rpx;
					transform: translateX(-20rpx);
					width: calc(100%);
					background: rgba(255, 187, 83, 0.3);
					color: #FD9509;
					//background-color: #FFBB53;
					font-size: 24rpx;
					text-align: center;
					border-radius: 0rpx 0rpx 20rpx 20rpx;
					padding: 20rpx;
				}
			}

			.me {
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				width: 672rpx;
				height: 64rpx;
				opacity: 0.5;
				border: 1rpx solid #FD9509;

				p {
					display: flex;
					align-items: center;
				}

				image {
					width: 50rpx;
				}

				span {
					font-size: 28rpx;
					font-weight: 600;
					color: #070E2F;
					margin-left: 10rpx;

					&:nth-child(3) {
						color: #aaa;
					}
				}
			}

			.ul {
				width: 100%;
				font-weight: bold;
				margin: 20rpx auto;
				background-color: #fff;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				text-align: center;
				font-size: 25rpx;
				padding: 20rpx 0rpx;
				box-sizing: border-box;

				image {
					width: 96rpx;
				}
			}
		}

		.click {
			position: absolute;
			right: 0;
			z-index: 1000;

			image {
				width: 116rpx;
			}
		}

		.btn {
			width: 520rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #FFBE00FF 0%, #FFC200FF 100%);
			border-radius: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 50rpx;
			left: 50%;
			transform: translateX(-50%);
			color: #FFFFFF;
		}
	}

	// 提示框
	/deep/ .uni-dialog-title {
		display: none;
	}

	/deep/ .uni-dialog-content-text {
		font-weight: 600;
		font-size: 34rpx;
		color: #353535;
		text-align: center;
	}
</style>